<template>
  <div style="padding: 20px 30px;">
    <el-row :gutter="20">
      <el-col :span="14">
        <div class="container">
          <div class="title">
            <span>店铺信息</span>
            <div style="width: 180px">
<!--              v-if="id===''"-->
              <el-select v-model="shopVal" size="small" @change="shopChange">
                <el-option
                  v-for="(item,index) in shopList"
                  :key="item.id"
                  :label="item.shopName"
                  :value="item.id"></el-option>
              </el-select>
            </div>
          </div>
          <div class="detail">
            <div class="shopTemp" style="background-color: #1bc98e">
              <div>订单总计</div>
              <div style="font-size: 40px;line-height: 60px;font-weight: bold">{{shopData.countorder}}</div>
            </div>
            <div class="shopTemp" style="background-color: #b29fff">
              <div>交易总额</div>
              <div><span>¥ </span><span class="num">{{shopData.sumpay}}</span></div>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="title">订单统计</div>
          <div class="detail">
            <div class="orderTemp" @click="handlerJumpOrderPage('third')">
              <div style="cursor:pointer" class="num blue">{{orderData.noreceived}}</div>
              <div style="cursor:pointer" class="line"></div>
              <div style="cursor:pointer">待接单</div>
            </div>
            <div class="orderTemp" @click="handlerJumpOrderPage('fifth')">
              <div style="cursor:pointer" class="blue num">{{orderData.unpaid}}</div>
              <div style="cursor:pointer" class="line"></div>
              <div style="cursor:pointer">待付款</div>
            </div>
            <div class="orderTemp"  @click="handlerJumpOrderPage('seventh')">
              <div style="cursor:pointer" class="blue num">{{orderData.uncomment}}</div>
              <div style="cursor:pointer" class="line"></div>
              <div style="cursor:pointer">待评价</div>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="title">
            <span>消费统计</span>
            <span style="display: flex;">
              <div class="time" :class="index === staCheck?'isCheck':''" v-for="(item,index) in time" :key="index"
                   @click="getOrderStatistics(index,item.id)">{{item.type}}</div>
            </span>
          </div>
          <div class="detail">
            <div class="staTemp">
              <div class="icon" style="background-color: #1bc98e"><img src="/static/img/order.png" width="40" height="40"/></div>
              <div class="staItem">
                <div class="num" style="color: #1bc98e;font-size: 30px">{{statisticsInfo.finished}}</div>
                <div>订单成交量</div>
              </div>
            </div>
            <div class="staTemp">
              <div class="icon" style="background-color: #15a0ff"><img src="/static/img/RMB.png" width="40" height="40"/></div>
              <div class="staItem">
                <div class="num" style="color: #15a0ff;font-size: 30px">{{statisticsInfo.payamount}}</div>
                <div>订单成交总额</div>
              </div>
            </div>
            <div class="staTemp">
              <div class="icon" style="background-color: #7538c7"><img src="/static/img/sta.png" width="40" height="40"/></div>
              <div class="staItem">
                <div class="num" style="color: #7538c7;font-size: 30px">{{statisticsInfo.payavg}}</div>
                <div>平均消费额</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="container" >
          <div class="title">
            <span>门店排行</span>
            <span style="display: flex;">
              <div class="time" :class="index === shopCheck?'isCheck':''" v-for="(item,index) in time" :key="index"
                   @click="getStoreRank(index,item.id)">{{item.type}}</div>
            </span>
          </div>
          <div class="detail">
            <el-table
              stripe
              :data="storeRankData"
              label-width="120px"
              height="600"
            >
              <el-table-column
                align="center"
                label="排名"
                type="index">
              </el-table-column>
              <el-table-column
                prop="shopName"
                align="center"
                label=店铺名称
              ></el-table-column>
              <el-table-column
                prop="ordercount"
                align="center"
                label=成交量
              ></el-table-column>
              <el-table-column
                prop="ordersum"
                align="center"
                label=成交金额
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {orderInfoStatistics, orderStutasStatistics, shopInfoStatistics, storeRankStatistics} from '@/api/order/order'
  import {getAllShops} from '@/api/shop/shops'

  export default {
    name: 'wel',
    data() {
      return {
        id: this.$store.state.user.shopId,
        shopList: [],
        shopVal: '全部门店',
        shopId: '',
        shopData: {
          countorder: 0,
          sumpay: 0
        },
        orderData: {
          noreceived: 0,
          unpaid: 0,
          uncomment: 0
        },
        storeRankData: [],
        statisticsInfo: {
          finished: 0,
          payamount: 0,
          payavg: 0
        },
        time: [
          {id: 1, type: '今日'},
          {id: 2, type: '当月'},
          {id: 3, type: '当年'},
        ],
        shopCheck: 0,
        staCheck: 0
      }
    },
    mounted() {
      this.init()
      if (this.$store.state.user.shopId !== '') {
        this.shopId = this.$store.state.user.shopId
      }
    },
    methods: {
      init() {
        this.getShopList()
        this.getShopInfo()
        this.getOrderInfo()
        this.getStoreRank(0, 1)
        this.getOrderStatistics(0, 1)
      },
      // 获取门店列表
      getShopList() {
        const params = new FormData()
        params.append('shopId', this.$store.state.user.shopId)
        getAllShops(params)
          .then((res) => {
            this.shopList = res.data.data
            this.shopList.unshift({shopName: '全部门店', id: ''})
          })
      },
      // 获取店铺信息
      getShopInfo() {
        const params = new FormData()
        params.append('shopId', this.shopId)
        shopInfoStatistics(params).then(res => {
          this.shopData = res.data
        })
      },
      shopChange(val) {
        this.shopId = val
        for (let i = 0; i < this.shopList.length; i++) {
          if (this.shopList[i].id === val) {
            this.shopVal = this.shopList[i].shopName
          }
        }
        this.getShopInfo()
        this.getOrderInfo()
        this.getOrderStatistics(0, 1)
      },
      //获取订单数据
      getOrderInfo() {
        const params = new FormData()
        params.append('shopId', this.shopId)
        orderStutasStatistics(params)
          .then(res => {
            this.orderData = res.data
          })
      },
      //门店排行
      getStoreRank(index, type) {
        this.shopCheck = index
        const data = new FormData()
        data.append('type', type)
        storeRankStatistics(data)
          .then(res => {
            this.storeRankData = res.data.data
          })
      },
      //订单概述
      getOrderStatistics(index, type) {
        this.staCheck = index
        const data = new FormData()
        data.append('type', type)
        data.append('shopId', this.shopId)
        orderInfoStatistics(data)
          .then(res => {
            this.statisticsInfo = res.data
          })
      },
      // 跳转订单页面
      handlerJumpOrderPage(val) {
        this.$router.push({
          path: '/order-order/index',
          query: {
            pageStatus: val
          }
        })
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .detail {
    padding: 20px 0;
    display: flex;
    align-items: center;
    min-height: 130px;
  }

  .container {
    padding: 10px 20px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .title {
    border-bottom: solid 1px #333333;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .shopTemp {
    min-width: 200px;
    border-radius: 4px;
    padding: 20px;
    color: #ffffff;
    margin: auto;
    font-size: 16px
  }

  .orderTemp {
    min-width: 150px;
    padding: 15px;
    margin: auto;
    font-size: 16px;
    text-align: center;
    color: #999999;
  }

  .line {
    width: 30px;
    height: 1px;
    margin: auto;
    background-color: #999999;
    margin-bottom: 10px;
  }

  .num {
    font-size: 40px;
    line-height: 60px;
    font-weight: bold
  }

  .blue {
    color: #15a0ff;
    font-size: 34px;
  }

  .time {
    margin: 0 10px;
    height: 36px;
  }

  .time:hover {
    cursor: pointer;
  }

  .isCheck {
    color: #D7000F;
    border-bottom: solid 2px #D7000F;
  }

  .staTemp {
    display: flex;
    margin: auto;
    color: #999999;
    text-align: center;
  }

  .icon {
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 10px 0 0 10px;
  }

  .staItem {
    padding: 10px 30px;
    border-radius: 0 10px 10px 0;
    border: solid 1px #eaeaea;
    width: 150px;
  }
</style>
